<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<title>留言反馈列表</title>

	<!-- 所有的 css 资源 -->
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="../../res/sa.css" rel="stylesheet">

	<!-- 所有的 js 资源 -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>

	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../res/sa.js"></script>

	<style>

		.td-img {
			width: 12em;
			height: 6em;
			cursor: pointer;
			vertical-align: middle;
		}


	</style>

</head>
<body>
<div class="vue-box">

	<!-- 表单部分 -->
	<div class="c-panel">
		<h4 class="c-title">检索参数</h4>
		<el-form label-width="80px" ref="form">

			<div class="c-item">
				<label class="c-label">标题：</label>
				<el-input @keyup.enter="f5" size="mini" v-model="p.title"></el-input>
			</div>

			<div class="c-item">
				<el-button @click="f5" icon="el-icon-search" size="mini" type="primary">查询</el-button>
			</div>

			<br/>
			<div class="c-item">
				<label class="c-label">排序：</label>
				<el-radio-group v-model="p.sort_type">
					<el-radio :label="0">排序值</el-radio>
					<el-radio :label="1">创建时间</el-radio>
					<el-radio :label="2">点击量</el-radio>
				</el-radio-group>
			</div>


		</el-form>
	</div>

	<!-- 表格 -->
	<div class="c-panel c-table">
		<h4 class="c-title">列表<span>（鼠标悬即可出现输入框，修改完成后点击【修改】按钮进行保存）</span></h4>

		<el-table :data="dataList" class="data-table" size="mini">
			<el-table-column label="编号" prop="id" width="70px"></el-table-column>
			<el-table-column label="图片" width="300px">
				<template slot-scope="scope">
					<img :src="scope.row.img_src" @click="sa.$fast.showImage(scope.row.img_src)" class="td-img"
					     title="点击预览">
					<span style="color: #666; padding-left: 0.5em;"> 点击图片预览</span>
				</template>
			</el-table-column>
			<el-table-column label="标题">
				<template slot-scope="scope">
					<el-input size="mini" v-model="scope.row.title"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="排序">
				<template slot-scope="scope">
					<el-input size="mini" v-model="scope.row.sort"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="点击量" prop="click_count" width="100px"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-switch :active-value="1" :inactive-value="2" @change="scope.row.is_update=true"
					           v-model="scope.row.status"></el-switch>
					<span style="color: #999;" v-if="scope.row.status==1">显示</span>
					<span style="color: #999;" v-else>隐藏</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" width="150px">
				<template slot-scope="scope">{{sa.$util.forDate(scope.row.create_time, 2)}}</template>
			</el-table-column>

			<el-table-column label="操作" prop="address">
				<template slot-scope="scope">
					<el-badge :is-dot="scope.row.is_update" class="item" is-dot style="margin: 5px 0;">
						<el-button @click="update(scope.row)" class="c-button" icon="el-icon-edit" type="primary">修改
						</el-button>
					</el-badge>
					<el-button @click="del(scope.row)" class="c-button" icon="el-icon-delete" type="danger">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="page-box">
			<el-pagination :current-page.sync="page.pageNo"
			               :page-size.sync="page.pageSize"
			               :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
			               :total="page.count"
			               @current-change="f5(true)"
			               @size-change="f5(true)"
			               background
			               layout="total, prev, pager, next, sizes, jumper">
			</el-pagination>
		</div>
	</div>

	<br/><br/><br/><br/>


	<!-- 添加一个 -->
	<div class="c-panel c-add-table">
		<h4 class="c-title">添加一个<span>（手机端按照排序值的大小从小到大进行前后排列）</span></h4>
		<el-table :data="[{}]" class="data-table" size="mini" style="width: 100%">
			<el-table-column label="编号" prop="id" width="70px">
				<template slot-scope="scope">{{addData.id}}</template>
			</el-table-column>
			<el-table-column label="图片" width="300px">
				<template slot-scope="scope">
					<img :src="addData.img_src" @click="sa.$fast.showImage(addData.img_src, '70%', '80%')"
					     class="td-img" title="点击预览">
					<span style="color: #666; padding-left: 0.5em;"> 点击图片预览</span>
				</template>
			</el-table-column>
			<el-table-column label="标题">
				<template slot-scope="scope">
					<el-input size="mini" v-model="addData.title"></el-input>
				</template>
			</el-table-column>
			<!-- <el-table-column label="跳转连接">
				<template slot-scope="scope">
					<el-input size="mini" v-model="addData.index"></el-input>
				</template>
			</el-table-column> -->
			<el-table-column label="排序">
				<template slot-scope="scope">
					<el-input size="mini" v-model="addData.sort"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-switch :active-value="1" :inactive-value="2" v-model="addData.status"></el-switch>
					<span style="color: #999;" v-if="addData.status==1">显示</span>
					<span style="color: #999;" v-else>隐藏</span>
				</template>
			</el-table-column>

			<el-table-column label="操作" prop="address">
				<template slot-scope="scope">
					<el-button @click="add" icon="el-icon-plus" size="mini" style="border-radius: 0px;" type="primary">
						添加
					</el-button>
				</template>
			</el-table-column>
		</el-table>

	</div>


</div>
<!-- 模拟数据 -->
<script src="swiper-list.js"></script>
<script>

    var app = new Vue({
        el: '.vue-box',
        data: {
            sa: sa, 	// 超级对象
            p: {		// 查询参数
                sort_type: 0
            },
            page: {
                pageNo: 1,
                pageSize: 10,
                count: 100,
            },	// 分页信息
            dataList: [],	// 数据集合
            addData: {		// 添加信息
                id: 11,
                title: '标题',
                type: 1,
                sort: 0,
                status: 1,
                img_src: 'http://pic.rmb.bdstatic.com/5d1bf2db27cd808776a6bbcb9cfc68ac.jpeg',
                create_time: new Date(),
                click_count: 42
            },
            curr_m: null // 当前操作的 m
        },
        methods: {
            // 刷新
            f5: function () {
                const pageStr = (this.page.pageNo === undefined ? '' : '?pageNo=' + this.page.pageNo + '&pageSize=' + this.page.pageSize);	// 拼接分页
                sa.get('/SysSwiper/getList' + pageStr, this.p, function (res) {
                    // this.dataList = sa.$util.listAU(res.data);	// 数据
                    // this.page = res.page;		// 分页
                    this.dataList = dataList;
                }.bind(this));
            },
            // 保存
            add: function () {
                sa.post('/SysSwiper/add', this.addData, function (res) {
                    layer.alert('添加成功', {}, function () {
                        app.dataList.push(sa.$util.copyJSON(app.addData));
                        layer.closeAll();
                    });
                })
            },
            // 修改
            update: function (data) {
                var data2 = sa.$util.copyJSON(data);
                data2.create_time = undefined;
                sa.put('/SysSwiper/update', data2, function (res) {
                    layer.msg('修改成功');
                    data.is_update = false;
                })
            },
            // 删除
            del: function (data) {
                layer.confirm('是否删除，此操作不可撤销', {}, function () {
                    sa.delete('/SysSwiper/delete', {id: data.id}, function (res) {
                        layer.msg('删除成功');
                        sa.$util.arrayDelete(this.dataList, data);
                    }.bind(this))
                }.bind(this))
            }

        },
        created: function () {
            this.f5();
        }
    });


    // 监控.c-table input，改变值时有些变化
    $('.c-table').bind('input', function () {
        var i = $(document.activeElement).parents('tr').index();
        app.dataList[i].is_update = true;
    })


</script>

</html>